<template>
    <div class="applyrecord">
        <Top title="申请记录" iconShow="1"></Top>
        <div class="applyrecord-content" v-for="(item,index) in applyList" :key="index">
            <div class="applyrecord-content-logo">
                <div class="applyrecord-content-logo-img">
                    <img :src="item.productLogo" alt="">
                </div>
            </div>
            <div class="applyrecord-content-detail">
                <div class="applyrecord-content-detail-top">
                    <div class="applyrecord-content-detail-top-left">
                        <p>{{item.productName}}</p>
                        <div>
                            <ul>
                                <li v-for="(itemC,idx) in item.label" :key="idx">{{itemC}}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="applyrecord-content-detail-top-right">
                        <mt-button type="primary" @click="goDetail(item.productId)">
                             再次申请
                        </mt-button>
                    </div>
                </div>
                <div class="applyrecord-content-detail-mid">
                    <span>¥</span>
                    <span>{{item.quato}}</span>
                    <span>额度范围&nbsp;&nbsp;(元)</span>
                </div>
                <div class="applyrecord-content-detail-bot">
                    <ul>
                        <li>{{item.lendSpeed}}放款</li>
                        <li>参考利率:{{item.dailyInterestRate}}%</li>
                        <li>贷款期限{{item.cycle}}</li>
                    </ul>
                </div>
            </div>
        </div>
        <load-more :tip="('加载中...')" v-if="loadMoreShow"></load-more>
        <load-more :show-loading="false" :tip="('没有更多了')" background-color="#f5f5f5" v-if="noMoreShow"></load-more>
    </div>
</template>
<script>
import Top from '../../../components/Header'
import { Tab, TabItem, cookie, LoadMore } from 'vux'
import {MessageBox} from 'mint-ui'
export default {
    name: 'applyrecord',
    components: { Top, Tab, TabItem, LoadMore },
    data() {
        return {
            applyList: [],
            pageNum: 1,
            // selectedList: [],
            flag: true,
            noMoreShow: false,
            loadMoreShow: false
        }
    },
    created() {
        var _this = this;
        this.$nextTick(function() {
            window.addEventListener('scroll', onScroll)
        })
        // 判断滚动条位置，加载更多
        function onScroll() {
            var scrollTop = document.body.scrollTop;
            var innerHeight = window.innerHeight;
            var offsetHeight = document.body.offsetHeight;
            if (scrollTop + innerHeight >= offsetHeight) {
                if (_this.flag) {
                    if (_this.applyList.length >= 6) {
                        _this.flag = false;
                        _this.getList()
                    } else {
                        _this.noMoreShow = true;
                    }
                }
            }
        }
    },
    mounted() {
        document.setTitle('申请记录');
        var token = cookie.get('token');
        this.$http.post('/loansupermarket-app/personal/getApplyListPage', { pageSize: 6, pageNum: 1, token: token }).then(function(response) {
            var resBody = response.data;
            this.applyList = resBody.data;
            //console.log(this.applyList)
            if (resBody.code == '000') {
                if (this.applyList.length > 0) {
                    this.applyList.forEach(function(item, idx) {
                        item.label = item.label.split(',');
                    })
                    if (this.applyList.length < 6) {
                        this.noMoreShow = true;
                    }
                } else {
                    MessageBox.alert('没有申请记录！')
                }
            }else if(resBody.code == '444'){
                this.$router.push({path:'/login',query:{history:1}});
            }else{
                MessageBox.alert(resBody.mesg);
            }
        })
    },
    methods: {
        goDetail(id) {
            this.$router.push({ path: '/loanplatformdetail', query: { id: id, status: 2 } })
        },
        getList() {
            var token = cookie.get('token');
            this.pageNum += 1;
            this.loadMoreShow = true;
            var _this = this;
            setTimeout(function() {
                _this.$http.post("/loansupermarket-app/personal/getApplyListPage", { pageNum: _this.pageNum, pageSize: 6, token: token })
                    .then((response) => {
                        if (response.data.code == '000') {
                            _this.flag = true;
                            _this.loadMoreShow = false;
                            var resBody = response.data;
                            if (resBody.data.length > 0) {
                                if (resBody.data.length < 6) {
                                    _this.noMoreShow = true;
                                    _this.flag = false;
                                }
                                resBody.data.forEach(function(item,index){
                                    item.label = item.label.split(',');
                                })
                                _this.applyList = _this.applyList.concat(resBody.data);
                                // _this.applyList.forEach(function(item, idx) {
                                //     item.label = item.label.split(',');
                                // })
                            }
                        }
                    })
            }, 500)
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../../scss/variable/base.scss';
.applyrecord {
    padding-top: 1.2rem;
    .weui-loadmore_line {
        margin-top: 0.6rem;
    }
    &-content {
        width: 100%;
        height: 3.44rem;
        display: flex;
        margin-top: 0.28rem;
        &-logo {
            flex: 2;
            background: #fff;
            &-img {
                width: 1.2rem;
                height: 1.2rem;
                background-size: cover;
                border-radius: 50%;
                margin: 0.4rem auto;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        &-detail {
            flex: 8;
            background: #fff;
            &-top {
                height: 1.54rem;
                &-left {
                    float: left;
                    text-align: left;
                    width: 5.5rem;
                    p {
                        text-align: left;
                        margin-top: 0.38rem;
                        font-size: 0.4rem;
                        height: 0.4rem;
                    }
                    ul {
                        margin-top: 0.32rem;
                        li {
                            float: left;
                            width: 1.32rem;
                            height: 0.45rem;
                            border: 1px solid $grayColor;
                            text-align: center;
                            line-height: 0.45rem;
                            border-radius: 0.12rem;
                            margin-right: 0.13rem;
                            color: $grayColor;
                        }
                    }
                }
                &-right {
                    float: left;
                    width: 2.25rem;
                    .mint-button {
                        margin-top: 0.4rem;
                        font-size: 0.36rem;
                        height: 0.9rem;
                    }
                }
            }
            &-mid {
                height: 0.4rem;
                margin-top: 0.3rem;
                text-align: left;
                span:nth-of-type(1) {
                    color: $redColor;
                    font-size: 0.4rem;
                }
                span:nth-of-type(2) {
                    color: $redColor;
                    font-size: 0.55rem;
                    margin-left: 0.1rem;
                }
                span:nth-of-type(3) {
                    color: $grayColor;
                    font-size: 0.3rem;
                    margin-left: 0.25rem;
                }
            }
            &-bot {
                ul {
                    padding: 0.35rem 0;
                    li {
                        float: left;
                        padding: 0 0.2rem;
                        font-size: 0.3rem;
                        &:nth-of-type(1) {
                            padding-left: 0;
                        }
                        &:nth-of-type(2) {
                            border-left: 1px solid $borderColor;
                            border-right: 1px solid $borderColor;
                        }
                    }
                }
            }
        }
    }
}
</style>


